<template>
  <el-container style="height: 100vh; display: flex; justify-content: center; align-items: center;">
    <el-form :model="form" ref="loginForm" label-width="80px">
      <el-form-item label="账号">
        <el-input v-model="form.username" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="form.password" placeholder="请输入密码" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script setup>
import {ref} from 'vue';
import {ElForm, ElInput, ElButton, ElContainer, ElMessage} from 'element-plus';
import request from "@/utils/request.js";
import router from "@/router/router.js";

const form = ref({
  username: '',
  password: '123456'
});
const login = () => {
  request.post(`/user/login`,{
    username: form.value.username,
    password: form.value.password
  }).then((res)=>{
    if(res.code===200){
      ElMessage.success("登陆成功")
      // 存储用户嘻嘻你
      localStorage.setItem("user",JSON.stringify(res.data))
      router.push('/')
    }else{
      ElMessage.error(`登陆失败,${res.msg}`)
    }
  }).catch((err)=>{
    ElMessage.error(`登陆失败,${err}`)
  })
};
</script>